<template>
	<view class="content">
		<viw class="scroll-card">
			<scroll-view scroll-y="true" style="height: 100vh; overflow: hidden;"  	scroll-anchoring="true"  show-scrollbar="false">

			<view class="scrollMain_box">
				<view class="sur_box_bg">
					<img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/community_bg.png" alt="" />
				</view>
				<!-- <view class="acrollMain_container"> -->
				<view class="top" >
					<view class="top_shequname" @click="changeName" :style="titleTop">
						<text>{{ houseName }}</text>
						<van-icon name="arrow-down" style="margin-left: 20rpx;"/>
					</view>
					<view class="top_bottom">
						<view class="top_bottom_item">
							<view><img class="suo"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/opendoor.png"
									alt="" /></view>
							<view class="top_bottom_text">开门</view>
						</view>
						<view class="top_bottom_item">
							<view><img class="pay"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/pay.png"
									alt="" /></view>
							<view class="top_bottom_text">缴费</view>
						</view>
						<view class="top_bottom_item">
							<view><img class="notice"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/notice.png"
									alt="" /></view>
							<view class="top_bottom_text">公告</view>
						</view>
						<view class="top_bottom_item">
							<view><img class="notice"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/warranty.png"
									alt="" /></view>
							<view class="top_bottom_text">保修</view>
						</view>
					</view>
				</view>
				<view class="main">
					<!-- 应用 -->
					<view class="application">
						<view class="app_top">
							<view class="app_item item_bottom" @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/myhome.png" />
								<view class="app_name">我的房间</view>
							</view>
							<view class="app_item item_bottom" @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/members.png" />
								<view class="app_name">家庭成员</view>
							</view>
							<view class="app_item item_bottom" @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/myCar.png" />
								<view class="app_name">我的车位</view>
							</view>
							<view class="app_item item_bottom" @click="changeNav(2)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/carsM.png" />
								<view class="app_name ">车辆管理</view>
							</view>
							<view class="app_item item_bottom" @click="changeNav(2)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/otherPay.png" />
								<view class="app_name ">其他缴费</view>
							</view>
							<!-- </view>
				<view class="app_bottom"> -->
							<view class="app_item " @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/water_rate.png" />
								<view class="app_name">水费</view>
							</view>
							<view class="app_item " @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/electric.png" />
								<view class="app_name">电费</view>
							</view>
							<view class="app_item " @click="changeNav(1)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/hot.png" />
								<view class="app_name">取暖费</view>
							</view>
							<view class="app_item" @click="changeNav(2)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/tousu.png" />
								<view class="app_name ">投诉建议</view>
							</view>
							<view class="app_item" @click="changeNav(2)">
								<img class="app_icon"
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/more.png" />
								<view class="app_name ">更多应用</view>
							</view>
						</view>
					</view>
					<!-- 社区活动 -->
					<view class="activity" v-if="actList.length >0">
						<view class="activity_title">
							<view class="act_title">社区活动</view>
							<!-- <view class="act_more ">
								<span class="r5 act_t">查看更多</span><img src="../../static/arrow_right.png" style="width: 4px; height:7px; display: inline-block;" />
							</view> -->
							<view class="act_more" @click="toMoreActivities">
								<span class="r5 act_t" style=" display: inline-block;"> 查看更多</span><van-icon name="arrow" />
							</view>
						</view>
						<view class="activity_content">
							<view class="box_content content_top b12 act_display" v-for="(item,index) in actList.slice(0, 3)" :key="index">
								<view class="content_img"><img :src="item.image" alt="" mode="widthFix"/></view>
								<view class="content_text">
									<view class="content_text_title">{{item.activities.title}}</view>
									<view class="content_text_date b11"> {{ item.monthAndDay }} {{item.weekDay}}  {{ item.times}}</view>
									<view class="content_text_address">{{ item.activities.addressDetail }}</view>

								</view>
							</view>
							<!-- <view class="box_content content_bottom act_display">
								<img class="content_img" src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg2.png" alt="" />
								<view class="content_text">
									<view class="content_text_title">公益活动|心肺复苏 CPR+AED 培训活动</view>
									<view class="content_text_date b11">10月20日 19:00-21:00</view>
									<view class="content_text_address">盐湖区 | 金鑫大酒店</view>

								</view>
							</view> -->
						</view>
					</view>
					<!-- 商家 -->
					<view class="shangjia" v-if="businessData.length>0">
						<view class="box_content sj_bg  act_display" v-for="(item, index) in businessData" :key="index" @tap="toMerchantInfo(item)">
							<view class="box_content_left ">
								<view class="content_img_sj"><img :src="item.imgUrl" alt="" /></view>
							</view>
							<view class="box_content_right ">
								<view class="box_content_right_L">
									<view class="content_text">
										<view class="content_text_title">{{ item.merchantName }}</view>
										<view class="content_sj_date b9">
											<span class="sj_status">{{ item.openBusiness?'营业中':'休息中'  }} </span>
											<span class="sj_date" v-if="item.openBusiness">{{ item.businessHours }}</span>
										</view>
										<view class="content_sj_address"> <img
												src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/position.png"
												style="width: 18rpx; height: 24rpx;margin-right: 12rpx;" />
											<!-- <van-icon name="location" size="12"/> -->
											<view class="sj_text business_address">{{ item.address }}</view>
										</view>
									</view>
								</view>
								<view class="box_content_right_R ">
									<view class="phone_icon t2"><img
											src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/phone.png"
											style="width: 32rpx;height:32rpx;" /></view>
									<view class="door">{{ item.communityDoorName }}</view>
									<view class="distance t5">距您 {{ item.distance }}</view>
								</view>
							</view>

						</view>

						<!-- <view class="box_content sj_bg b10 act_display display_space_b">
						<view class="box_content_left  act_display">
							<view class="content_img_sj"><img
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/duoduo.png"
									alt="" /></view>
							<view class="content_text">
								<view class="content_text_title">多多来生鲜水果店</view>
								<view class="content_sj_date b9"><span class="sj_status">营业中 \t\t</span>
									<span class="sj_date">周一至周日 08:30-22:30</span>
								</view>
								<view class="content_sj_address"> <img
										src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/position.png"
										style="width: 18rpx; height: 24rpx;margin-right: 12rpx;" />
									<view class="sj_text">水岸华庭·东郡西门 101 商铺</view>
								</view>
							</view>
						</view>
						<view class="box_content_right_R ">
							<view class="phone_icon t2"><img
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/phone.png"
									style="width: 32rpx;height:32rpx;" /></view>
							<view class="door">西门</view>
							<view class="distance t5">距您 \t\t\t 580米</view>
						</view>
					</view>

					<view class="box_content sj_bg  act_display display_space_b">
						<view class="box_content_left  act_display">
							<view class="content_img_sj"><img
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/duoduo.png"
									alt="" /></view>
							<view class="content_text">
								<view class="content_text_title">多多来生鲜水果店</view>
								<view class="content_sj_date b9"><span class="sj_status">营业中 \t\t</span>
									<span class="sj_date">周一至周日 08:30-22:30</span>
								</view>
								<view class="content_sj_address"> <img
										src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/position.png"
										style="width: 18rpx; height: 24rpx;margin-right: 12rpx;" />
									<view class="sj_text">水岸华庭·东郡西门 101 商铺</view>
								</view>
							</view>
						</view>
						<view class="box_content_right_R ">
							<view class="phone_icon t2"><img
									src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/phone.png"
									style="width: 32rpx;height:32rpx;" /></view>
							<view class="door">西门</view>
							<view class="distance t5">距您 \t\t\t 580米</view>
						</view>
					</view> -->
					</view>
					<!-- logo -->
					<view class="logo_img">
						<img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/logo_img.png"
							style="height: 56rpx; width:238rpx ;" />
					</view>
				</view>
			<!-- </view> -->
			</view>
			</scroll-view>
		</viw>
		<tabBar :activeNav="activeNav"></tabBar>

		<van-action-sheet :show="showHouseName" :actions="actionsName" @click-overlay="overlayName" @cancel="onCloseName"
			@select="onSelectName" cancel-text="取消" :z-index="10000" />
	</view>
</template>

<script>
import  {PAGE_TYPE} from '@/utils/constant'
import { tabBar } from '@/mycomponents/tabBar'
import { getPageMerchantListApi } from '@/api/business'
import { getPropertyActivityListApi } from '@/api/activity'
export default {
	components: {
		tabBar
	},
	data() {
		return {
			title: 'Hello111',
			curIndex: 1,
			option1: [
				{ text: '水岸华庭.东郡0', value: 0 },
				{ text: '水岸华庭.东郡1', value: 1 },
				{ text: '水岸华庭.东郡2', value: 2 },
			],
			applications: [],
			// option2: [
			// 	{ text: '默认排序', value: 'a' },
			// 	{ text: '好评排序', value: 'b' },
			// 	{ text: '销量排序', value: 'c' },
			// ],
			value1: 0,
			value2: 'a',
			activeNav: 1,
			houseName: "水岸华庭.东郡",
			showHouseName: false,  //切换房子的列表
			actionsName: [{   //房子列表
				name: '水岸华庭.东郡0',
			},
			{
				name: '水岸华庭.东郡1',
			},],

			actList: [
				{
					// imgurl: require('../../static/actImg1.png'),
					image:'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png',
					title: "社区活动 | 零基础瑜伽体验活动",
					date: '10月13日 周六 14:00-16:00',
					address: "水岸华庭·东郡 | 篮球场"
				},
				{
					image: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg2.png",
					title: "公益活动|心肺复苏 CPR+AED 培训活动",
					date: '10月20日 19:00-21:00',
					address: "盐湖区 | 金鑫大酒店"
				}
			],
			businessData:[
			{
				imgUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/carBeauty.png",
				merchantName: "车友汽车美容装饰东郡店",
				status:'营业中',
				date: '周一至周日 08:30-22:30',
				address: "水岸华庭·东郡西门 101 商铺",
				communityDoorName:'西门',
				distance:'580',
				openBusiness: true,
				businessHours: '08:30-22:30'
			},			
			{
				imgUrl: "https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/duoduo.png",
				merchantName: "多多来生鲜水果店",
				status:'营业中',
				date: '周一至周日 08:30-22:30',
				address: "盐湖区 | 金鑫大酒店",
				communityDoorName:'西门',
				distance:'580',
				openBusiness: true,
				businessHours: '08:30-22:30'
			},
			],
			// menuButtonTop:'',
			// titleTop:''
			pageNum: 1,
            pageSize: 3,
			communityId: '', // 小区id
			latitude:'35.035290', // 纬度
			longitude: '110.989768', // 经度
			// 以下活动列表需要用到
			startDate: undefined, // 开始时间
			endDate: undefined, // 结束时间
			province: '山西省', // 省
			city: '运城市', // 市
			county: undefined, // 区
			signupRestriction: 0, // 报名限制  0 全员可报 1 仅限业主  2 制定小区
			total: 0,
			isLoadAll: false,
			loading: false,
			finished: false,
			pageType: PAGE_TYPE.COMMUNITY,
		}
	},
	onLoad() {
		const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
        console.log('胶囊按钮高度：', menuButtonInfo.height);
        console.log('胶囊按钮top：', menuButtonInfo.top,menuButtonInfo);

        this.menuButtonTop = menuButtonInfo.top
        this.titleTop='margin-top:'+ (( this.menuButtonTop + menuButtonInfo.height/2 )*2)+'rpx' 
        console.log(this.titleTop)
	},
	onShow(){
		this.getPageMerchantList()
		this.getCommunityActivityList()
	},
	methods: {
		login() {
			uni.navigateTo({
				url: '/pages/home/index'
			})
		},

		changeNav(index) {
			switch (index) {
				case 0:
					uni.navigateTo({
						url: '/pages/find/index'
					})
					break;
				case 1:
				uni.navigateTo({
						url: '/pages/community/index'
					})
					break;
				case 2:
				uni.navigateTo({
						url: '/pages/surprise/index'
					})
					break;
				case 3:
				uni.navigateTo({
						url: '/pages/my/index'
					})
					break;
			}
		},
		clearStorage() {
			uni.showToast({
				title: '清除成功',
				icon: 'success',
				duration: 2000, // 提示的延迟时间，单位毫秒，默认：1500
				mask: false, // 是否显示透明蒙层，防止触摸穿透，默认：false
				// image:'./image.png',//自定义图标的本地路径
			})
		},
		onChangeNav() {
			console.log("11111")
		},

		// 下拉选择框
		changeName() {
			this.showHouseName = true
		},
		// 下拉选择框
		onCloseName() {
			this.showHouseName = false
		},
		overlayName() {
			this.showHouseName = false
		},
		onSelectName(e) {
			console.log(e, e.detail.name,'切换房子')
			this.houseName=e.detail.name
			this.showHouseName=false
			// this.contentData = []
			// this.Name = e.detail.name
			// this.NameId = e.detail.id
			// this.showBox = false
			// // this.current = 0  //让区域切换组件默认选中第一个
			// // this.tabCurrent = 'tabNum0'  //传给组件的
			// // console.log(this.current, this.tabCurrent, 'tabCurrent', this.regionId, 'regionId', 'qihuan年级')
			// Promise.all([ this.queryStatisticsStayTimeSchoolMethod() ]).then(() => {
			//     if (this.selectData !== null && this.selectData.length > 0) {
			//         if (this.regionId === '') {
			//             this.regionId = this.selectData[0].id
			//             this.currentName = this.selectData[0].name
			//         } else {
			//         }
			//         // console.log(this.regionId, 'regionId', 'qihuan年级')
			//         this.queryStatisticsStayTimeSchoolListMethod()
			//     }
			//     this.showBox = true
			// })
			// this.showHouseName = false
			// this.actionsName.forEach((i) => {
			// 	if (i.name === this.Name) {
			// 		i.color = '#1F6AFF'
			// 	} else {
			// 		i.color = '#242629'
			// 	}
			// })
		},
		toMerchantInfo(item){
			uni.navigateTo({
				url: '/pages/merchant/merchantInfo?params='+
				encodeURIComponent(JSON.stringify({merchantId:item.id}))
			})
		},
		// 商户的地址计算
		formatDistance(distanceInMeters) {
			// debugger
			if (distanceInMeters < 1000) {
				return `${Math.round(distanceInMeters)}米`;
			} else {
				const km = distanceInMeters / 1000;
				console.log(km, 'km',km.toFixed(1))
				return `${km.toFixed(1)}千米`;
			}
		},
		// 活动状态修改
		formatStatus(status) {
			const mineStatusMap = {
				0: '已报名',
				1: '已参加',
				2: '已取消'
			};

			const normalStatusMap = {
				0: '未发布',
				1: '报名中',
				2: '报名已满',
				3: '已结束',
				4: '已取消'
			};
			return this.pageSign == 'mine'
				? mineStatusMap[status] || ''
				: normalStatusMap[status] || '';
		},
		// 跳转活动详情
		toActivityDetail(i) {
			const params = {
				pageType: PAGE_TYPE.COMMUNITY,
				pageSign: this.pageSign,
				activitiesId: i.activities.id,
				signUpActId: undefined,  //活动报名id
				activityStatus: i.status ,
				fromEarnPoints: this.fromEarnPoints,
				isSignedUp:i.isSignedUp || false ,
			}
			uni.navigateTo({
				url: '/pages/findPage/activityDetail?params=' +
					encodeURIComponent(JSON.stringify(params))
			})

		},
		// 同城活动
		toMoreActivities(){
			const params = {
				pageType:PAGE_TYPE.COMMUNITY,
				// pageBiaoshi:'find'
			}
			uni.navigateTo({
				url: '/pages/findPage/activitiesList?params='+
				encodeURIComponent(JSON.stringify(params))
			})
		},


		// 商户详情 
		getPageMerchantList() {
			this.businessData = []
			this.pageNum = 1

			const params = {
				communityId: this.communityId, //社区id
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				latitude: Number(this.latitude),
				longitude:Number(this.longitude),
			}
			return new Promise((resolve, reject) => {
				getPageMerchantListApi(params).then((res) => {
					if (res.code === 200) {
						// this.total = res.data.total;
						// 修改数据合并方式
						this.businessData = this.pageNum === 1
						? res.data.list
						: [...this.businessData, ...res.data.list];

						this.businessData.forEach(item => {
							item.distance =this.formatDistance(Number(item.distance))
							console.log(item.distance,'item.distance')
						})
						resolve(res)
					} else {
						reject(res)
					}
				}).finally(() => {
					this.loading = false;
				})
			})
		},

		// 活动列表
		getCommunityActivityList() {
			// if (this.loading || this.finished) return;
			// this.loading = true;
			this.actList = []
			this.pageNum = 1;

			const apiParams = {
				...(this.startDate && { startTime: this.startDate }),
				...(this.endDate && { endTime: this.endDate }),
				province: this.province,
				city: this.city,
				signupRestriction: this.signupRestriction, //活动报名限制
				...(this.communityId && {communityId: this.communityId}), // 小区id
				pageNum: this.pageNum,
				pageSize: this.pageSize,
			}
			console.log(apiParams,'apiParams')
			return new Promise((resolve, reject) => {
				getPropertyActivityListApi(apiParams).then((res) => {
					console.log(res.data)
					if (res.code === 200) {
						this.total = res.data.total;
						// 修改数据合并方式
						this.actList = this.pageNum === 1
						? res.data.list
						: [...this.actList, ...res.data.list];

						this.actList.forEach(item => {
						item.image = 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/actImg1.png'
						item.statusText = this.formatStatus(item.activities.status)
						item.times = this.formatTime(item.activities.startTime)
						})
						this.finished = this.actList.length >= this.total;
						this.pageNum++;
						console.log(this.actList, 'this.orderList')
						this.isOrder = this.actList.length > 0

						resolve(res)
					} else {
						reject(res)
					}
					}).finally(() => {
					this.loading = false;
					})
			})
		},

	}
}
</script>

<style lang="scss" scoped>



.content {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: calc(100vh - 100rpx);
	overflow-y: auto;
	z-index: -2;
	background-size: 100%;
	width: 100%;
	background-color: #F9F9F9;
}

.scroll-card{
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	height: 100vh;
	background-color: #F9F9F9;
}



//背景图部分
.sur_box_bg {
	position: absolute;
	top: 0rpx;
	width: 100%;
	height: 360rpx;

	img {
		width: 100%;
		height: 360rpx;
	}

}


.scrollMain_box{
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	z-index: -1;
	background: #f9f9f9;
	padding-bottom: 30rpx;
}
// .acrollMain_container{
// 	position: absolute;
// 	top: 0%;
// }

.top {
	// position: relative;
	z-index: 5;
	box-sizing: border-box;
	// margin-top: 118rpx;
	font-weight: bolder;
	margin-left: 24rpx;
	margin-right: 24rpx;

	.top_shequname {
		// position: absolute;
		// top: 60px;
		margin-top: 118rpx;
		margin-left: 14rpx;
		color: #ffffff;
		font-size: 32rpx;
		font-weight: bolder;
		height: 30rpx;
		line-height: 30rpx;

	}
	



	.top_bottom {
		// position: absolute;
		// left: 29px;
		// background-color: pink;
		// margin: 23px 7px 18px 7px;
		margin-top: 64rpx;
		margin-bottom: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_bottom_item{
		flex:1;
		text-align: center;
		img{
			width: 68rpx;
			height: 68rpx;
		}
	}
	.top_bottom_text {
		font-weight: bold;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #ffffff;
		margin-top: 16rpx;
		// background: pink;
	}

	.right {
		margin-right: 120rpx;
	}
}




.main {
	// position: relative;
	z-index: 3;
	box-sizing: border-box;
	width: 100%;
	// padding-bottom:60rpx;
	margin-top: 44rpx;
}

.application {
	
	margin-left: 24rpx;
	margin-right: 24rpx;

	.app_top {
		display: flex;
		text-align: center;
		justify-content: space-around;
		width: 100%;
		flex-wrap: wrap; /* 允许Flex项目换行 */

	}

	.app_bottom {
		display: flex;
		text-align: center;
		margin-top: 40rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
		justify-content: space-around;
		white-space: pre-wrap;
	}


	.app_item{
		// flex: 1;
		width: 20%;
		margin-bottom: 40rpx;
	}
	.app_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.app_name {
		// font-weight: bold;
		font-size: 24rpx;
		color: #333333;
		line-height: 24rpx;
	}
	// .item_bottom{
	// 	margin-bottom: 40rpx;
	// }
}

// 社区活动
.activity {
	border-radius: 6px;
	background: #ffffff;
	margin-left: 24rpx;
	margin-right: 24rpx;
	padding: 30rpx 24rpx 28rpx 24rpx;

	.activity_title {
		height: 28rpx;
		line-height: 28rpx;
	}

	.act_title {
		float: left;
		font-size: 28rpx;
		line-height: 28rpx;
		text-align: left;
		color: #111111;
		font-weight: bolder;
	}


	.act_more {
		float: right;
		line-height: 20rpx;
		vertical-align: middle;
		height: 20rpx;
		font-size: 20rpx;
		text-align: right;
		color: #666666;


		.act_t {
			color: #666666;
			font-size: 20rpx;
		}

		.act_Im {
			vertical-align: -2rpx;
		}
	}

	.activity_content {
		margin-top: 30rpx;
	}
}

// 社区商家活动部分 盒子样式
.box_content {
	.content_img {
		margin-right: 20rpx;
		width: 112rpx;
		height: 112rpx;
		line-height: 112rpx;
		// width: 20%;
		// display: flex;
		// justify-content: center;
		// flex-direction: column;
		img{
			// width: 100%;
			// height: auto;
			width:112rpx;
			height:112rpx;
		}
	}

	.content_img_sj{
		margin-right: 20rpx;
		width:112rpx;
		height: 112rpx;
		line-height: 112rpx;
		img{
			width: 112rpx;
			height: 112rpx;
		}
	}
	.content_text {
	

		.content_text_title {
			color: #222222;
			// font-weight: 700;
			font-size: 28rpx;
			text-align: left;
			line-height: 28rpx;
			margin-top: 4rpx;
		}

		.content_text_date {
			// font-weight: 400;
			height: 20rpx;
			font-size: 20rpx;
			text-align: left;
			color: #111111 ;
			line-height: 20rpx;
			margin-top: 18rpx;
		}

		.content_sj_date {
			font-size: 20rpx;
			height: 20rpx;
			line-height: 20rpx;
			margin-top: 18rpx;
			text-align: left;
			color: #888888;
		}

		.content_text_address {
			height: 20rpx;
			font-size: 20rpx;
			text-align: left;
			color: #888888;
			line-height: 20rpx;
		}

		.content_sj_address {
			height: 24rpx;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: left;
			display: flex;
			color: #888888;
			max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
		}

		.business_address{
			height: 24rpx;
			line-height: 24rpx;
			font-size: 20rpx;
			text-align: left;
			// display: flex;
			color: #888888;
			max-width: 100%;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 超出部分隐藏 */
            text-overflow: ellipsis;
		}
	}
}


// 多次用到display
.act_display {
	display: flex;
}

.display_space_b {
	justify-content: space-between;
}

// 商家盒子
.shangjia {
	margin: 24rpx;


	.sj_bg {
		border-radius: 6px;
		background: #ffffff;
		padding: 24rpx 20rpx 24rpx 24rpx;
		margin-bottom: 20rpx;
	}
	// .sj_bg :last-child{
	// 	margin-bottom: 0px;
	// }

}

// span样式  未生效
.sj_status {
	color: #111111;
	margin-right: 10rpx;
}

.sj_date {
	color: #888888;
}

.box_content_left {
	text-align: left;
}
.box_content_right{
	display: flex;
	justify-content: space-between;
	// width: 100%;
	width: calc(100% - 132rpx);
}
.box_content_right_L{
	text-align: left;
	width: calc(100% - 164rpx);
}
// 商家活动box 右侧电话地址
.box_content_right_R {
	text-align: right;
	width: 164rpx; // 固定宽度
	.phone_icon {
		height: 32rpx;
		line-height: 32rpx;
		margin-bottom: 22rpx;
		img{
			width: 32rpx;
			height: 32rpx;
		}
	}

	.door {
		font-weight: bolder;
		height: 26rpx;
		line-height: 26rpx;
		font-size: 26rpx;
		color: #222222 ;
	}

	.distance {
		font-size: 20rpx;
		line-height: 20rpx;
		color: #333333;
		// letter-spacing: 10rpx;
		text-align: right;
	}
}

// logo
.logo_img{
	text-align: center;
	padding-bottom: 24rpx;
	//position: absolute;
    //bottom: 144rpx;
    width: 100%;
}



.r5{
	margin-right: 10rpx;
}

.r10 {
	margin-right: 20rpx;
}

.t1{
	margin-left: 2rpx;
}
.t2 {
	margin-top: 4rpx;
}

.t5 {
	margin-top: 10rpx;
}

.t9 {
	margin-top: 18rpx;
}

.t10 {
	margin-top: 20rpx;
}
.b1{
	margin-right: 2rpx;
}
.b9 {
	margin-bottom: 18rpx;
}
.b10 {
	margin-bottom: 20rpx;
}
.b11 {
	margin-bottom: 22rpx;
}

.b12 {
	margin-bottom: 24rpx;
}
::v-deep .van-tabbar-item{
	font-size: 20rpx;
	color: #666666;
}
::v-deep .van-tabbar-item--active{
    font-weight: bolder;
	font-size: 20rpx;
	color: #666666;
}
</style>
